<template>
  <div class="home">
    <div class="nav-bar-wrap">
       <van-nav-bar title="预约会议" @click-right="add">
       <van-icon name="add-o" slot="right" />
      </van-nav-bar>
    </div>   
    <van-tabs v-model="active1" style="margin-top:60px;">
      <van-tab v-for="(item,index) in tabs" :title="item.name" :key="index">
        <div>
          <div class="date-wrap">
            <div class="date-item" v-for="(item,index) in date" :key="index" @click="choose(item,index)">
              {{item.name}}
            </div>
          </div>
          <div class="date-wrap">
            <div class="date-item" v-for="(item,index) in date" :key="index" @click="choose(item,index)">
              {{item.time}}
            </div>
          </div>
          <div class="date-wrap date-line">
            <div v-for="(item,index) in date" :key="index" :class="{'choose-active':item.choosed}" @click="choose(item,index)">

            </div>
          </div>
          <div v-if="meetingList.length>0">
            <van-steps direction="vertical" active-color="#f60">
              <van-step v-for="(item,index) in meetingList" :key="index">
                <div @click="goDetail(item,index)">
                  <div>{{item.time}}
                  <span class="begin-name">发起人:{{item.invite_usr_nick_names}}</span>
                  </div>
                 <h3>{{item.mr_names}}</h3>
                  <p>云会员号:{{item.room_cuids}}
                    <span class="avatar" v-if="item.weekly_periods">周期</span>
                  </p>
                </div>  
              </van-step>
            </van-steps>
          </div>
          <div v-else class="data-none">暂无日程安排</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  Cell,
  CellGroup,
  Icon,
  NavBar,
  Toast,
  Tab,
  Tabs,
  Step,
  Steps
} from 'vant'
import appointmentVue from './appointment.vue'
import api from '../../api/meeting.api.js'
import dayjs from 'dayjs'
const week = {
  0: '日',
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六'
}
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Step.name]: Step,
    [Steps.name]: Steps
  },
  data() {
    return {
      startDate: dayjs().unix(),
      endDate: dayjs()
        .set('hour', 23)
        .set('minute', 59)
        .set('second', 59)
        .unix(),
      active1: 0,
      active2: 0,
      meetingList: [
        {
          time: '07:00-08:20',
          mr_names: '研发部周例会',
          room_cuids: '2121211212',
          invite_usr_nick_names: '昵称',
          weekly_periods: true
        },
        {
          time: '07:00-08:20',
          mr_names: '产品迭代会议',
          room_cuids: '21213344212',
          invite_usr_nick_names: '昵称',
          weekly_periods: true
        },
        {
          time: '07:00-08:20',
          mr_names: '研发部周例会',
          room_cuids: '33217891212',
          invite_usr_nick_names: '昵称',
          weekly_periods: false
        },
        {
          time: '07:00-08:20',
          mr_names: '研发部周例会',
          room_cuids: '2121211212',
          invite_usr_nick_names: '昵称',
          weekly_periods: true
        },
        {
          time: '07:00-08:20',
          mr_names: '产品迭代会议',
          room_cuids: '21213344212',
          invite_usr_nick_names: '昵称',
          weekly_periods: true
        },
        {
          time: '07:00-08:20',
          mr_names: '研发部周例会',
          room_cuids: '33217891212',
          invite_usr_nick_names: '昵称',
          weekly_periods: false
        }
      ],
      tabs: [
        {
          name: '未开始',
          id: 0
        },
        {
          name: '已结束',
          id: 1
        }
      ],
      date: [
        {
          name: week[dayjs().day()],
          time: dayjs().date(),
          choosed: true
        },
        {
          name:
            week[
              dayjs()
                .add(1, 'day')
                .day()
            ],
          time: dayjs()
            .add(1, 'day')
            .date(),
          choosed: false
        },
        {
          name:
            week[
              dayjs()
                .add(2, 'day')
                .day()
            ],
          time: dayjs()
            .add(2, 'day')
            .date(),
          choosed: false
        },
        {
          name:
            week[
              dayjs()
                .add(3, 'day')
                .day()
            ],
          time: dayjs()
            .add(3, 'day')
            .date(),
          choosed: false
        },
        {
          name:
            week[
              dayjs()
                .add(4, 'day')
                .day()
            ],
          time: dayjs()
            .add(4, 'day')
            .date(),
          choosed: false
        },
        {
          name:
            week[
              dayjs()
                .add(5, 'day')
                .day()
            ],
          time: dayjs()
            .add(5, 'day')
            .date(),
          choosed: false
        },
        {
          name:
            week[
              dayjs()
                .add(6, 'day')
                .day()
            ],
          time: dayjs()
            .add(6, 'day')
            .date(),
          choosed: false
        }
      ]
    }
  },
  methods: {
    goDetail(item,index){
      console.log('跳转')
      this.$router.push({name:'meeting-details',params: item})
    },
    add() {
      this.$router.push({ name: 'appointment' })
    },
    choose(item, index) {
      this.date.forEach(element => {
        element.choosed = false
      })
      this.date[index].choosed = true
      console.log(index)
      this.startDate = dayjs()
        .add(index, 'day')
        .unix()
      this.endDate = dayjs()
        .set('hour', 23)
        .set('minute', 59)
        .set('second', 59)
        .add(index, 'day')
        .unix()
      this.initData(this.startDate)
    },
    initData(begin) {
      let searchSchedulesData = {
        cmdid: 'usr_search_schedule', // 必填
        filter_type: [], // 选填， 同上
        filter_value: [], // 选填， 同上
        start_end_time: [begin, this.endDate] // 必填， 查询范围的起止时间戳， 单位秒， 前者为开始时间， 后者为终止时间
      }
      api.getMeetingList(searchSchedulesData).then(res => {
        console.log(res)
      })
    }
  },
  mounted() {
    this.initData(this.startDate)
  }
}
</script>

<style scoped lang='less'>
.home {
  
  .begin-name {
    float: right;
  }
  .data-none{
    text-align: center;
    height: 200px;
    line-height: 200px;
    font-size: 18px;
    color: #9b9b9b;
  }
  .avatar {
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    background: #3ec047;
    float: right;
  }
  .date-line {
    height: 5px;
    div {
      padding: 0px 10px;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      background: #cacece;
    }
    .choose-active {
      background: #3580e7;
    }
  }
  .date-wrap {
    display: flex;
    margin: 10px 0 10px;
    overflow: hidden;
    position: relative;
    padding: 0 10px;
    padding-bottom: 0px;
    .date-item {
      float: left;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      text-align: center;
      font-size: 10px;
      position: relative;
    }
  }
}
</style>